<template>
  <div ref="toolbarRef" class="component-toolbar" :class="{ 'toolbar-bottom': shouldShowAtBottom }">
    <!-- 取消互斥按钮 -->
    <el-button v-if="hasMutexSupport && hasMutexConfig" type="danger" size="small" :icon="Close" title="取消互斥" @click.capture.stop="handleCancelMutex" />

    <!-- 取消关联按钮 -->
    <el-button v-if="hasMutexSupport && hasRelateConfig" type="danger" size="small" :icon="Close" title="取消关联" @click.capture.stop="handleCancelRelate" />

    <!-- 互斥设置按钮 -->
    <el-button v-if="hasMutexSupport" :type="mutexButtonType" size="small" :icon="mutexIcon" :title="mutexTitle" @click.capture.stop="handleMutex" />

    <!-- 选项关联 -->
    <el-button  v-if="hasMutexSupport" type="primary" size="small" :icon="Magnet" :title="relateTitle" @click.stop="handleRelate" />

    <!-- 复制按钮 -->
    <el-button type="primary" size="small" :icon="CopyDocument" :title="copyTitle" @click.stop="handleCopy" />

    <!-- 删除按钮 -->
    <el-button type="primary" size="small" :icon="Delete" :title="deleteTitle" @click.stop="handleDelete" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, CopyDocument, Magnet,  Setting, Close, Bottom, Lock, Unlock, } from '@element-plus/icons-vue';
import type { CanvasComponent } from '../types';
import { EventBus } from '@/utils/eventBus';

interface Props {
  component: CanvasComponent;
  variant?: 'default' | 'modern' | 'minimal' | 'floating';
  compact?: boolean;
  showLock?: boolean;
  isLocked?: boolean;
  deleteTitle?: string;
  copyTitle?: string;
  topTitle?: string;
  bottomTitle?: string;
  mutexTitle?: string;
  relateTitle?: string;
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  compact: false,
  showLock: false,
  isLocked: false,
  deleteTitle: '删除组件',
  copyTitle: '复制组件',
  topTitle: '置顶',
  bottomTitle: '置底',
  mutexTitle: '互斥设置',
  relateTitle: '选项关联'
});

const emit = defineEmits<{
  delete: [id: string];
  copy: [component: CanvasComponent];
  'open-relate': [component: CanvasComponent];
  'move-to-top': [id: string];
  'move-to-bottom': [id: string];
  'toggle-lock': [id: string, locked: boolean];
  'open-mutex': [component: CanvasComponent];
  'cancel-mutex': [component: CanvasComponent];
}>();

// 工具栏元素引用
const toolbarRef = ref<HTMLElement>();

// 检查是否支持互斥设置
const hasMutexSupport = computed(() => {
  return ['radio', 'select', 'checkbox'].includes(props.component.type);
});

// 检查是否有互斥配置
const hasMutexConfig = computed(() => {
  return props.component.props.mutexConfig?.enabled && props.component.props.mutexConfig.rules && props.component.props.mutexConfig.rules.length > 0;
});

// 检查是否有关联配置
const hasRelateConfig = computed(() => {
  return props.component.props.relateConfig?.enabled && props.component.props.relateConfig.rules && props.component.props.relateConfig.rules.length > 0;
});

// 计算互斥按钮类型
const mutexButtonType = computed(() => {
  return hasMutexConfig.value ? 'warning' : 'primary';
});

// 计算互斥按钮图标
const mutexIcon = computed(() => {
  return hasMutexConfig.value ? Setting : Setting;
});

// 计算互斥按钮标题
const mutexTitle = computed(() => {
  return hasMutexConfig.value ? '编辑互斥规则' : '设置互斥规则';
});

// 计算是否应该显示在底部
const shouldShowAtBottom = computed(() => {
  // 基于组件位置计算，如果组件顶部距离画布顶部太近，则显示在底部
  const componentTop = props.component.position.y || 0;
  const threshold = 40; // 距离画布顶部40px以内时显示在底部

  return componentTop < threshold;
});

const handleDelete = (event: Event) => {
  event.stopPropagation();
  EventBus.emit('delete-component', { componentId: props.component.id });
};

const handleCopy = (event: Event) => {
  event.stopPropagation();
  EventBus.emit('copy-component', { component: props.component });
};

const handleRelate = (event: Event) => {
  event.stopPropagation();
  if(hasMutexConfig.value) {
    ElMessage.warning('请先取消互斥设置');
    return
  }
  EventBus.emit('open-relate', { component: props.component });
};

const handleMutex = (event: Event) => {
  event.stopPropagation();
  if(hasRelateConfig.value) {
    ElMessage.warning('请先取消关联设置');
    return
  }
  EventBus.emit('open-mutex', { component: props.component });
};

const handleCancelMutex = (event: Event) => {
  event.stopPropagation();
  EventBus.emit('cancel-mutex', { component: props.component });
};

const handleCancelRelate = (event: Event) => {
  event.stopPropagation();
  EventBus.emit('cancel-relate', { component: props.component });
};

// const handleMoveToTop = (event: Event) => {
//   event.stopPropagation();
//   emit('move-to-top', props.component.id);
// };

// const handleMoveToBottom = (event: Event) => {
//   event.stopPropagation();
//   emit('move-to-bottom', props.component.id);
// };

// const handleToggleLock = (event: Event) => {
//   event.stopPropagation();
//   emit('toggle-lock', props.component.id, !props.isLocked);
// };

</script>

<style scoped lang="scss">
.component-toolbar {
  position: absolute;
  top: -26px;
  right: -5px;
  z-index: 999;
  display: flex;
  gap: 4px;
  transition: all 0.2s ease;

  .el-button {
    scale: 0.8;
    margin: 0;
  }

  // 当显示在底部时的样式
  &.toolbar-bottom {
    top: auto;
    bottom: -26px;
    right: -5px;

    // 添加一个小箭头指向组件
    &::before {
      content: '';
      position: absolute;
      top: -4px;
      right: 10px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid #409eff;
    }
  }
}

// 显示动画
.canvas-component.active .component-toolbar {
  opacity: 1;
}
</style>
